@import "../var";
@import "../mixin";
.level-info {
  position: relative;
  img {
    width: 100%;
    display: block;
  }
  .level-info-con {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 px(19) px(16);
    h2 {
      font-size: px(16);
      color: #444;
      padding: px(10) px(20) 0;
      margin-bottom: px(-38);
      i {
        margin-right: px(12);
        vertical-align: -2px;
      }
    }
    .level-group {
      display: flex;
      align-items: flex-end;
      height: px(174);
      font-size: 0;
      margin: 0 0 px(10);
      padding-bottom: px(10);
      position: relative;
      &:before {
        content: '';
        position: absolute;
        bottom: px(17);
        left: 0;
        right: 0;
        margin: auto;
        width: px(290);
        height: px(2);
        border-radius: px(2);
        background: rgba(255,255,255,.3);
      }
      .level-item {
        position: relative;
        font-size: px(12);
        display: inline-block;
        width: px(79);
        text-align: center;
        &:not(:first-child) {
          margin-left: px(8);
        }
        &:nth-child(1) {
          .level-progress {
            height: px(1);
          }
        }
        &:nth-child(2) {
          .level-progress {
            height: px(14);
          }
        }
        &:nth-child(3) {
          .level-progress {
            height: px(42);
          }
        }
        &:nth-child(4) {
          .level-progress {
            height: px(83);
          }
        }
        &.active {
          .level-progress {
            background-image: linear-gradient(0deg, #333333 0%, #555555 100%);
          }
          .level-type {
            color: #FFD800;
            background-image: linear-gradient(0deg, #333333 0%, #555555 100%);
          }
        }
        .avatar-item {
          display: none;
          width: px(30);
          height: px(30);
          overflow: hidden;
          border-radius: 50%;
          margin: 0 auto px(2);
          &.show {
            display: block;
          }
        }
        .level-progress {
          width: px(4);
          margin: px(4) auto px(8);
          background: #F6E4C7;
          border-radius: px(2);
        }
        .level-type {
          width: px(32);
          height: px(16);
          line-height: px(16);
          color: #fff;
          background: #F5DCB3;
          border-radius: px(2);
          margin: auto;
        }
      }
    }
    p {
      font-size: px(12);
      color: #444;
      margin-top: px(4);
      padding: 0 px(20);
      strong {
        color: #333333;
        margin-left: px(8);
      }
    }
  }
}
.description-item {
  padding: px(16);
  margin-bottom: px(12);
  background-color: #fff;
  &:last-child {
    margin: 0;
  }
  .description-tit {
    font-size: px(16);
    margin-bottom: px(16);
  }
  .description-list {
    li {
      position: relative;
      margin-top: px(8);
      padding-left: px(16);
      font-size: px(16);
      &:before {
        content: '';
        position: absolute;
        top: px(5);
        left: 0;
        width: px(6);
        height: px(6);
        border-radius: px(6);
        background: #999;
      }
    }
  }
  .description-table {
    border-radius: px(4);
    overflow: hidden;
    margin-top: px(12);
    border-bottom: px(1) solid #F0F0F0;
    table {
      width: 100%;
    }
    tr {
      border-left: px(1) solid #F0F0F0;
      border-right: px(1) solid #F0F0F0;
      &:first-child {
        border: none;
      }
      &:nth-child(odd) {
        background: #F6F6F6;
      }
    }
    th {
      line-height: px(37);
      background: #F8E2B9;
      font-size: px(12);
      color: #666;
      text-align: center;
    }
    td {
      text-align: center;
      line-height: 1.6;
      padding: px(10);
      max-width: px(132);
      vertical-align: top;
      span {
        text-align: left;
        display: inline-block;
        vertical-align: top;
      }
    }
  }
}
